<!DOCTYPE html>
<!--[if lt IE 7 ]>
<html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>
<html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>
<html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>
<html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="UTF-8"/>
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
    <title>Open your timeshelf right now with my9time now!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/login.css"/>
    <link rel="stylesheet" type="text/css" href="css/login-style.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate-custom.css"/>
    <link rel="stylesheet" href="js/jquery-ui/themes/base/jquery.ui.all.css">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-ui/ui/jquery.ui.core.js"></script>
    <script src="js/jquery-ui/ui/jquery.ui.widget.js"></script>
    <script src="js/jquery-ui/ui/jquery.ui.datepicker.js"></script>

    <script>
        $(function () {
            $("#datepicker").datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "-100:+0"
            });
        });
    </script>
</head>
<body>
<div class="container">
    <!-- Codrops top bar -->
    <header>
        <h1>Open your timeshelf with <span>my9time</span> now!</h1>
    </header>
    <section>
        <div class="col-xs-12 col-md-6">
            <!-- oauth -->
            <!-- google -->
            <a href="/auth/google" data-ng-click="oauthLogin('google')">
                <img height="40" width="170" src="images/oauth/google.png" style="margin-bottom:20px;"/>
            </a>
            <!-- facebook -->
            <a href="/auth/facebook" data-ng-click="oauthLogin('facebook')">
                <img height="40" width="170" src="images/oauth/facebook.png" style="margin-bottom:20px;"/>
            </a>
        </div>

        <div id="container_login">
            <a class="hiddenanchor" id="toregister"></a>
            <a class="hiddenanchor" id="tologin"></a>
            <a class="hiddenanchor" id="toforgot"></a>
            <a class="hiddenanchor" id="tologin-fromforgot"></a>


            <div id="wrapper">

                <div id="login" class="animate form">
                    <form action="mysuperscript.php" autocomplete="on">
                        <h1>Log in</h1>

                        <p>
                            <label for="username" class="uname" data-icon="u"> Your email or username </label>
                            <input id="username" name="username" required="required" type="text"
                                   placeholder="myusername or mymail@mail.com"/>
                            <span class="help-block"
                                  ng-show="loginForm.username | shouldDisplayError:loginForm:'required'">
                                Please input your username!
                            </span>
                        </p>

                        <p>
                            <label for="password" class="youpasswd" data-icon="p"> Your password </label>
                            <input id="password" name="password" required="required" type="password"
                                   placeholder="eg. 345JB5KJ2"/>
                            <span class="help-block"
                                  ng-show="loginForm.password | shouldDisplayError:loginForm:'required'">
                    Please input your password!
                            </span>
                        </p>

                        <p class="keeplogin">
                            <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping"/>
                            <label for="loginkeeping">Keep me logged in</label>
                        </p>
                        Or <a href="#toforgot" class="to_forgot">forgot password</a>?


                        <p class="login button">
                            <input type="submit" value="Login"/>
                        </p>

                        <p class="change_link">
                            Not a member yet ?
                            <a href="#toregister" class="to_register">Register</a>
                        </p>
                    </form>
                </div>

                <div id="forgot" class="animate form">
                    <form action="mysuperscript.php" autocomplete="on" id="">
                        <h1>Forgot Password?</h1>

                        <p>
                            <label for="usernameforgot" class="uname" data-icon="u"> Your email or username </label>
                            <input id="usernameforgot" name="usernameforgot" required="required" type="text"
                                   placeholder="myusername or mymail@mail.com"/>
                        </p>

                        <p class="forgot button">
                            <input type="submit" value="Reset password"/>
                        </p>

                        <p class="change_link">
                            Wanna login?
                            <a href="#tologin-fromforgot" class="to_login1">Login</a>
                        </p>

                    </form>
                </div>

                <div id="register" class="animate form">
                    <form action="mysuperscript.php" autocomplete="on">
                        <h1> Create your own timeshelf </h1>

                        <p>
                            <label for="usernamesignup" class="uname" data-icon="u">Username</label>
                            <input id="usernamesignup" name="usernamesignup" required="required" type="text"
                                   placeholder="username1992"/>
                        </p>

                        <p>
                            <label for="emailsignup" class="youmail" data-icon="e">Email</label>
                            <input id="emailsignup" name="emailsignup" required="required" type="email"
                                   placeholder="mymail@mail.com"/>
                        </p>

                        <p>
                            <label for="passwordsignup" class="youpasswd" data-icon="p">Password </label>
                            <input id="passwordsignup" name="passwordsignup" required="required" type="password"
                                   placeholder="eg. 345JB5KJ2"/>
                        </p>

                        <p>
                            <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your
                                password </label>
                            <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required"
                                   type="password" placeholder="eg. 345JB5KJ2"/>
                        </p>

                        <p>
                            <label class="birthday">Birthday</label><br/>
                            <select id="year">
                                <option>1992</option>
                            </select>
                            <select id="month">
                                <option>tháng 1</option>
                            </select>
                            <select id="date">
                                <option>01</option>
                            </select>
                        </p>

                        <p>
                            <label>Sex</label><br/>
                            <label>
                                <input type="radio" name="gender" value="male" class="form-control" checked
                                       ng-model="newUser.gender"/>Male
                            </label>
                            <label>
                                <input type="radio" name="gender" value="female" class="form-control"
                                       ng-model="newUser.gender"/>Female
                            </label>
                        </p>

                        <p class="signin button">
                            <input type="submit" value="Sign up"/>
                        </p>

                        <p class="change_link">
                            Already have your timeshelf?
                            <a href="#tologin" class="to_register"> Go and log in </a>
                        </p>
                    </form>
                </div>

            </div>
        </div>


    </section>
</div>

</body>
</html>